<template>
	<view class="pages">		
		<uni-card :isShadow="true" style="color:#ffffff;"
		:title="item.title" 
		:subTitle="item.tameLeaderName"
		 mode="basic" :extra="item.startEnd" 
		 v-for="(item , index) in list" >
			<view>
				<view class="content-box"><text style="font-size: 12px;">组员：{{item.tameMembersName}}</text></view>
				<view class="content-box">
					<text style="font-size: 12px;">职责描述：{{item.dutyDescribe}}</text>
					<button v-if="item.checkPoint == null" class="checkBtn" @click="clickCard(item)">打卡</button>
					<button v-else class="checkBtn" style="background-color: #55ff7f;">已打卡</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>


<script>
	var self
	import { mapGetters } from 'vuex';
	import { getList,addLog } from '@/api/duty.js'
	import '@/common/util.js'
	export default {
		components: {
		},
		computed:{
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		data() {
			return {
				selectId:0,
				inputValue:"",
				list:[],
				latitude:0,
				longitude:0,
				status:false,
				facilityType:[{"code":0,"codeDesc":"未处理"},{"code":1,"codeDesc":"处置中"},{"code":2,"codeDesc":"完成"},{"code":3,"codeDesc":"忽略"}],
				searchForm:{
					pageNum:1,
					pageSize:15,
				}
			}
		},
		onLoad() {
			self = this
			this.getListData()
		},	
		methods: {
			clickCard(item) {
				if(item.clockInPosition == null || item.clockInRange == null){
					uni.showToast({
						title: '请设置打卡范围',
						icon:'error',
						duration: 1000
					});
					return
				}
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						console.log(res, '当前位置');
						self.latitude = res.latitude;
						self.longitude = res.longitude;
						var lng = item.clockInPosition.split(",")[0]
						var lat = item.clockInPosition.split(",")[1]
						if(self.distance(lng, lat) <= parseInt(item.clockInRange)){
							addLog({
								dutySetupId: item.id,
								checkPoint: res.longitude + "," + res.latitude,
							}).then(out => {
								uni.showToast({
									title: '打卡完成',
									duration: 1000
								});
								self.getListData()
							});
						}else{
							uni.showToast({
								title: '超出打卡范围',
								icon:'error',
								duration: 1000
							});
							return
						}
					}
				});
			},
			//根据金纬度计算距离
			distance(lng1, lat1) {
				// console.log('计算地点经纬度：', lat1, lng1);
				// console.log(this.res);
				let lng2 = self.longitude;
				let lat2 = self.latitude;
				var radLng1 = (lng1 * Math.PI) / 180.0;
				var radLng2 = (lng2 * Math.PI) / 180.0;
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var mdifference = radLng1 - radLng2;
				var difference = radLat1 - radLat2;
				var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(difference / 2), 2)
						+ Math.cos(radLng1) * Math.cos(radLng2) * Math.pow(Math.sin(mdifference / 2), 2)));
				distance = distance * 6378.137;
				distance = Math.abs(Math.round(distance * 10000) / 10);
				console.log('两点距离={}', distance);
				return distance;
			},
			getListData(paging){
				this.list = []
				getList(this.searchForm).then(res => {
					res.forEach(item=>{
						var startTime = new Date(item.start.replace(/-/g, "/"))
						var endTime = new Date(item.end.replace(/-/g, "/"))
						item.startEnd = startTime.Format("yyyy-MM-dd HH:mm") + " - "+ endTime.Format("yyyy-MM-dd HH:mm")
						if(endTime >= new Date()){
							this.list.push(item)
						}
					})
				}, err => {
					reject(err)
				});
			},
		}
	}
</script>
<style lang="scss">
@import '@/style/list.scss';
</style>
<style lang="scss">
	.checkBtn{
		height: 150rpx;
		width: 150rpx;
		border-radius: 150rpx;
		background-color: #00aaff;
		line-height: 150rpx;
		color: white;
		margin: 0 auto;
	}
	.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title[data-v-19622063] {
	    font-size: 15px;
	    color: #702C9E;
	}
</style>

